<template>
  <div>
    <ul>
      <li v-for="(i, index) in rolelist" :key="index">
        {{ i.name }}
        <el-button @click="setResource(i.id, i.pid)">资源配制</el-button>
      </li>
    </ul>

    <div>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="80%">
        <div v-if="flag == true">
          继承角色
          <select v-model="parentRole">
            <option :value="0">请选择</option>
            <option v-for="(i, index) in rlist" :value="i.id" :key="index">
              {{ i.name }}
            </option>
          </select>
        </div>

        选择资源
        <el-transfer v-model="value" :data="data"></el-transfer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- {{ data }} -->
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      rolelist: [],
      dialogVisible: false,
      value: [],
      data: [],
      flag: false,
      id: 0,
      rlist: [],
      data: [],
      parentRole: 0,
    };
  },
  methods: {
    getRolelist() {
      this.axios.get("/getroles").then((res) => {
        this.rolelist = res.data.msg;
        this.rolelist.forEach((element) => {
          if (element["pid"] == -1) {
            this.rlist.push(element);
          }
        });
      });
    },
    setResource(id, pid) {
      this.id = id;
      if (pid == -1) {
        this.flag = false;
      } else {
        this.flag = true;
      }
      //获取资源列表

      this.dialogVisible = true;
    },
    submit() {
      var data = {
        roleid: this.id,
        parentRole: this.parentRole,
        reslist: this.value,
      };
      this.axios.post("/setresou", data).then((res) => {});
      this.dialogVisible = false;
    },
    mes() {
      this.axios.get("/getresource").then((res) => {
        this.data = res.data.list;
        console.log(this.data);
      });
    },
  },
  mounted() {
    this.getRolelist();
    this.mes();
  },
};
</script>
  
  <style>
</style>